import React, { Component } from 'react'

// 导入组件
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';

// 导入axios
import axios from 'axios'
// 导入导航菜单图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

// 导入样式
import './index.css'

// 导入utils 获取当前定位城市的方法
import { getCurrentCity } from '../../utils';

// 导航菜单数据
const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/list'
  },
  {
    id: 1,
    img: Nav2,
    title: '合租',
    path: '/home/findHouse'
  },
  {
    id: 1,
    img: Nav3,
    title: '地图找房',
    path: '/home/news'
  },{
    id: 1,
    img: Nav4,
    title: '去出租',
    path: '/home/my'
  }
]

// 获取h5 地理位置信息 api
// navigator.geolocation.getCurrentPosition(position => {
//   console.log('当前位置信息', position);
// })

export default class index extends Component {

    state = {
        // 轮播图数据
        swipers: [],
        isSwiperLoaded: false,

        // 租房小组数据
        groups: [],

        // 资讯数据
        news: [],

        // 当前城市名
        curCityName: '上海'
      }
    // 添加cdu钩子函数
    // 路由信息是通过props传递给组件的 通过比较更新前后的两个props
    componentDidUpdate(prevProps) {
      // console.log('componentDidUpdate');
      if (prevProps.location.pathname !== this.props.location.pathname) {
        // 此时 说明路由发生了切换
        this.setState({
          selectedTab: this.props.location.pathname
        })
      }
    }
    //   获取来轮播图数据的方法
    async getSwipers(){
      const res = await axios.get('http://liufusong.top:8080/home/swiper')
    //   console.log('轮播图数据为', res);
    this.setState(()=>{
        return {
            swipers: res.data.body,
            isSwiperLoaded: true
        }
    })
    }

    // 获取租房小组数据的方法
    async getGroupes() {
      const res = await axios.get('http://liufusong.top:8080/home/groups', {
        params: {
          area: 'AREA%7C88cff55c-aaa4-e2e0'
        }
      })
      // console.log(res);
      this.setState({
        groups: res.data.body
      })
    }

    // 获取资讯news数据的方法
    async getNews() {
      const res = await axios.get('http://liufusong.top:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0')
      // console.log(res);
      this.setState({
        news: res.data.body
      })
    }

      async componentDidMount() {
        // 调用请求到的数据 不然会执行
        this.getSwipers()
        this.getGroupes()
        this.getNews()

        // 通过ip定位获取到当前城市名称
        // const curCity = new window.BMap.LocalCity()
        // curCity.get( async res=> {
        //   // console.log(res);
        //   const result = await axios.get(`http://liufusong.top:8080/area/info?name=${res.name}`)
        //   // console.log(result);
        //   this.setState({
        //     curCityName: result.data.body.label
        //   })
        // })
        const curCity = await getCurrentCity()
        this.setState({
          curCityName: curCity.label
        })
      }
    
    //   渲染轮播图结构
    renderSwipers() {
        return this.state.swipers.map(item => (
            <a
              key={item.id}
              href="http://itcast.cn"
              style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
              <img
                src={`http://liufusong.top:8080${item.imgSrc}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
              />
            </a>
          ))
    }
    // 渲染导航菜单数据
    renderNavs() {
      return navs.map(item=><Flex.Item key={item.id} onClick={()=>this.props.history.push(item.path)}>
        <img src={item.img} alt='' />
        <h2>{item.title}</h2>
      </Flex.Item>  )
    }
    // 渲染资讯数据
    renderNews() {
      return this.state.news.map((item)=>(
        <div className='news-item' key={item.id}>
          <div className='imgwrapNews'>
            <img className='img' src={`http://liufusong.top:8080${item.imgSrc}`} alt=''/>
          </div>
          <Flex className='content' direction='column' justify='between'>
            <h3 className='title'>{item.title}</h3>
            <Flex className='info' justify='between'>
              <span>{item.from}</span>
              <span>{item.date}</span>
            </Flex>
          </Flex>
        </div>
      ))
    }
    render() {
      return (
        <div className='index'>
            {/* 轮播图 */}
            <div className="swiper">
            {this.state.isSwiperLoaded ? (
               <Carousel
               autoplay
               infinite
               autoplayInterval={5000}   
             >
              {this.renderSwipers()} 
             </Carousel>
            ) : (
            '')}

            {/* 搜索框 */}
            <Flex className='search-box'>
              {/* 左侧白色区 */}
              <Flex className='search'>
                {/* 位置 */}
                <div className='location' onClick={()=>this.props.history.push('/citylist')}>
                  <span className='name'>{this.state.curCityName}</span>
                  <i className='iconfont icon-arrow' />
                </div>
                {/* 搜索表单 */}
                <div className='form'  onClick={()=>this.props.history.push('/search')}>
                <i className='iconfont icon-search' />
                <span className='text'>请输入小区或地址</span>
                </div>
              </Flex>
              {/* 右侧地图图标 */}
              <i className='iconfont icon-map'  onClick={()=>this.props.history.push('/map')} />
            </Flex>
            </div>

          {/* 菜单导航 */}
          <Flex className='nav'>
          {this.renderNavs()} 
          </Flex>

          {/* 租房小组 */}
          <div className='group'>
            <h3 className='group-title'>
              租房小组 <span className='more'>更多</span>
            </h3>

            {/* 宫格组件 */}
            <Grid 
            data={this.state.groups} 
            columnNum={2} 
            square={false} 
            hasLine={false} 
            renderItem={(item)=>(
              <Flex className='group-item' justify='around' key={item.id}>
                <div className='desc'>
                  <p className='title'>{item.title}</p>
                  <span className='info'>{item.desc}</span>
                </div>
                <img className='imgs' src={`http://liufusong.top:8080${item.imgSrc}`} alt=""/>
              </Flex>
            )} />
          </div>

          {/* 新闻资讯 */}
          <div className='news'>
            <h3 className='group-title'>最新资讯</h3>
            <WingBlank size='md'>{this.renderNews()}</WingBlank>
          </div>
        </div>
      );
    }
}
